<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3导航栏</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        @font-face{
            font-family: 'ziti';
            src: url('./Joker Smiling.ttf');
        }
        .wra{
            width:610px;
            height:40px;
            /* border:1px solid black; */
            margin:100px auto;
        }
        ul{
            width:100%;
            height:100%;
            background:rgb(253, 133, 11,1);
            list-style:none;
            border-radius:10px;
            box-shadow: 2px 4px 8px rgba(0,0,0,1)
        }
        ul::after{
            content:"";
            clear:both;
            display: block;
        }
        ul li{
            margin:10px 0;
            height:20px;
            width:100px;
            float:left;
            text-align: center;
            border-right:1px dashed rgba(186,186,186,1);
            color:rgba(255,255,255,1);
            font-family: 'ziti';
            font-size:20px;
            text-shadow: 2px 4px 3px rgba(0,0,0,1)
            
        }
        ul .none{
            border:none;
        }

    </style>
</head>
<body>
    <div class="wra">
        <ul>
            <li>Home</li>
            <li>About me</li>
            <li>Portfolio</li>
            <li>Blog</li>
            <li>Resources</li>
            <li class="none">Contact me</li>
        </ul>
    </div>
</body>
</html>